<template>
	<view :class="props.flex ? 'flex-point-box':'point-box'" :style="{'font-size':props.fontSize}"
		@click="hanldeClickGoods">
		<view class="point-price point" v-if="isShowPointRedemptionPrice">
			<text>{{ shopConfigStore.config.pointShowName }}兑换价:</text>
			<text class="red">{{ shopConfigStore.config.pointDiscountedProportion * props.data.pointsDeduction }}{{
            shopConfigStore.config.pointShowName }} +
				{{ parseFloat(props.data.price - props.data.pointsDeduction).toFixed(2) }}元</text>
		</view>
		<view class="point-price" v-if="isShowBuyGivePoint">
			<text>购买赠送:</text>
			<text class="red"> {{ props.data.points }}{{ shopConfigStore.config.pointShowName }} </text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue';
	import { useShopConfigStore } from '@/core/store';
	import {
		OpenPointEnum, PointExchangeModelEnum, ShowPointExchangePriceEnum,
		ShowPointsGiveMsgEnum, PointsGiveModeEnum
	} from '@/core/enum';

	// 获取项目配置
	const shopConfigStore = useShopConfigStore();

	const props = withDefaults(defineProps<{
		data : any,
		flex : boolean,
		fontSize : string,
	}>(), {
		data: {},
		flex: false,
		fontSize: '20rpx'
	});

	// 是否显示积分兑换价格
	const isShowPointRedemptionPrice = computed(() => {
		return shopConfigStore.config.pointSwitch == OpenPointEnum.yes &&
			shopConfigStore.config.pointExchangeModel == PointExchangeModelEnum.single &&
			shopConfigStore.config.pointShowExchangePrice == ShowPointExchangePriceEnum.yes && props.data?.pointsDeduction > 0;
	})

	// 是否显示购买送积分
	const isShowBuyGivePoint = computed(() => {
		return shopConfigStore.config.pointSwitch == OpenPointEnum.yes &&
			shopConfigStore.config.pointGetModel == PointsGiveModeEnum.single &&
			shopConfigStore.config.pointShowPoint == ShowPointsGiveMsgEnum.yes && props.data?.points > 0;
	})

	const emit = defineEmits(['hanldeClickGoods']);

	const hanldeClickGoods = () => {
		emit('hanldeClickGoods', props.goodsData)
	}
</script>
<style lang="scss" scoped>
	.flex-point-box {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.point-price {
			margin-top: 20rpx;
		}
	}

	.point-box {
		.point {
			margin-top: 30rpx;
		}
	}

	.point-price {
		margin-top: 8rpx;
		color: #6E737D;

		.red {
			color: #D33123;
		}
	}
</style>